﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>AlloyCrop base on AlloyFinger</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: black;
            text-align: center;
        }

        #crop_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            display: inline-block;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
        }

        #crop_circle_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
            display: inline-block;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <img src="test.png" style="display: none;">
    <div id="crop_result" style="text-align: center; padding-top: 30px; height: 230px; line-height: 300px;"></div>
    <a id="crop_btn">Crop Rect</a>
    <a id="crop_circle_btn">Crop Circle</a>

    <script src="../asset/transform.js"></script>
    <script src="../alloy_finger.js"></script>
    <script src="alloy_crop.js"></script>
    <script>
        ; (function () {
            var crop_btn = document.querySelector("#crop_btn");
            var crop_result = document.querySelector("#crop_result");
            var crop_circle_btn = document.querySelector("#crop_circle_btn");

            function showToolPanel() {
                crop_btn.style.display = "inline-block";
                crop_result.style.display = "block";
                crop_circle_btn.style.display = "inline-block";
            }

            function hideToolPanel() {
                crop_btn.style.display = "none";
                crop_result.style.display = "none";
                crop_circle_btn.style.display = "none";
                crop_result.innerHTML = "";
            }

            new AlloyFinger(crop_btn, {
                tap: function () {
                    hideToolPanel();
                    new AlloyCrop({
                        image_src: "test.png",
                        width: 200,
                        height: 100,
                        ok: function (base64, canvas) {
                            crop_result.appendChild(canvas);
                            crop_result.querySelector("canvas").style.borderRadius = "0%";
                            showToolPanel();
                        },
                        cancel: function () {
                            showToolPanel();
                        }
                    });

                }
            });

            new AlloyFinger(crop_circle_btn, {
                tap: function () {
                    hideToolPanel();
                    new AlloyCrop({
                        image_src: "test.png",
                        circle: true,
                        width: 200,
                        height: 200,
                        ok: function (base64, canvas) {
                            crop_result.appendChild(canvas);
                            crop_result.querySelector("canvas").style.borderRadius = "50%";
                            showToolPanel();
                        },
                        cancel: function () {
                            showToolPanel();
                        }


                    });


                }
            });

        })();

    </script>

    <a href="https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop">
        <img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1000;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png">
    </a>

</body>
</html>
